<template>
	<view class="container">
		<fu-navbar title="选择工作项" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="search-wrap">
			<view class="search-box">
				<image class="search" src="../../../static/images/search-0.png" mode="widthFix"></image>
				<input placeholder="设备编码/名称/工作内容" placeholder-class="pla-ipt" class="ipt flex-1" v-model="emName" @confirm="search" />
				<view class="btn" @click="search">搜索</view>
			</view>
		</view>
		<view class="list">
			<view class="item flex align-center border-b-c9 padding-lr-16 padding-tb-8 over-hidden" v-for="(item, index) in list" :key="index" @click="checkItem(item, index)">
				<block>
					<image src="../../../static/images/check-action.png" class="select-icon flex-shrink" v-if="item.checked"></image>
					<image src="../../../static/images/check.png" class="select-icon flex-shrink" v-else></image>
				</block>
				<view class="con flex-1 over-hidden margin-t-24">
					<view class="flex align-center fs-28 over-hidden justify-between">
						<view class="flex-shrink">{{item.taskName}}</view>
						<!-- <view class="text-ellipsis">所属设备：{{item.businessType}}</view> -->
					</view>
					<view class="margin-t-16 fs-26 color-8a">{{item.taskDesc}}</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="status" v-if="list.length > 5"></uni-load-more>
		
		<!-- 空数据显示 -->
		<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
		
		<!-- <view class="add-btn" @click="navTo('/pages/inspection/add-work/index')">
			<image src="../../../static/images/add2.png" class="icon"></image>
			<view class="fs-26 margin-t-8">新增</view>
		</view> -->
		
		<view class="btn-wrap">
			<view class="btn" @click="submit">确认</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			emName: '',
			list: [],
			isInit: false,
			page: 1,
			status: 'more',
			planType: '',
			isClick: false
		}
	},
	onLoad(option) {
		this.planType = option.planType
		this.getList()
	},
	onPullDownRefresh() {
		this.status = 'more';
		this.page = 1;
		this.getList();
	},
	onReachBottom() {
		if (this.status == 'more') {
			this.getList();
		}
	},
	methods: {
		search() {
			this.status = 'more';
			this.page = 1;
			this.getList();
		},
		navTo(path) {
			uni.navigateTo({
				url: path
			})
		},
		getList() {
			if (this.status != 'more') return;
			this.status = 'loading';
			this.$api.post(global.apiUrls.getTemplatePlanTask, {
				pageNum: this.page,
				pageSize: 10,
				taskName: this.emName,
				planType: this.planType
			}).then(res => {
				if (res.data.code == 9100) {
					let total = res.data.info.total
					this.total = total
					let data = res.data.info.rows
					data.forEach(item => {
						item.checked = false
					})
					if (this.page == 1) this.list = [];
					this.list = this.list.concat(data)
					if (this.list.length < total) {
						this.status = 'more';
						this.page++;
					} else {
						this.status = 'noMore';
					}
				}
				this.isInit = true;
				uni.stopPullDownRefresh();
			}).catch(() => {
				uni.stopPullDownRefresh();
			})
		},
		checkItem(item, i) {
			this.list[i].checked = !this.list[i].checked
		},
		submit() {
			if (this.isClick) return;
			let arr = []
			this.list.forEach(item => {
				if (item.checked) {
					arr.push(item)
				}
			})
			this.isClick = true
			uni.$emit('getWorks', arr)
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f3f5f8;
}
.search-wrap {
	padding: 16rpx 24rpx;
	.search-box {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 8rpx;
		padding: 8rpx 0;
		.search {
			width: 38rpx;
			margin: 0 20rpx;
			flex-shrink: 0;
		}
		.ipt {
			font-size: 28rpx;
		}
		.pla-ipt {
			color: #b6b6b6;
		}
		.btn {
			flex-shrink: 0;
			width: 108rpx;
			height: 56rpx;
			border-radius: 56rpx;
			background-color: #1c91ff;
			color: #fff;
			text-align: center;
			line-height: 56rpx;
			font-size: 28rpx;
			margin-right: 8rpx;
		}
	}
}
.list {
	padding: 0 24rpx;
	.item {
		background-color: #fff;
		.select-icon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 20rpx;
		}
	}
}
.color-8a {
	color: #8a8a8a;
}
.add-btn {
	position: fixed;
	right: 24rpx;
	bottom: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.icon {
		width: 108rpx;
		height: 108rpx;
	}
}
.btn-wrap {
	height: 138rpx;
	.btn {
		position: fixed;
		bottom: 30rpx;
		width: 88%;
		left: 0;
		right: 0;
		margin: 0 auto;
		height: 98rpx;
		background-color: #007aff;
		text-align: center;
		line-height: 98rpx;
		text-align: center;
		font-size: 38rpx;
		color: #fff;
		border-radius: 12rpx;
		z-index: 9;
	}
}
</style>